<template>
  <div id="pie-chart"></div>
</template>
<script setup>
import * as echarts from "echarts";
import resize from "@/utils/resize";
import { getCurrentInstance } from "vue";
let myChart = shallowRef();
let num = 10;
let colors = ["#B48EFF", "#FF7070", "#61C8FF"];
let textColors = [
  "rgb(204, 92, 248)",
  "rgb(33, 171, 119)",
  "rgb(58, 176, 252)",
  "rgb(250, 199, 94)",
];
let datas = [
  { name: "当日用水", value: 255 },
  { name: "昨日用水", value: 312 },
  { name: "环比", value: 36 },
];

let y1 = ref([3, 6, 8, 9, 335, 532, 532, 532, 8, 9, 335, 532, 532, 532]);

let bar_waste_name = ref([]);

let props = defineProps(["lineChange", "bar_waste_name"]);
watch(
  () => props.lineChange,
  () => {
    x.value = props.lineChange.x;
    y1.value = props.lineChange.y1;
    y2.value = props.lineChange.y2;

    bar_waste_name.value = props.bar_waste_name;
    getServerData();
  },
  { deep: true }
);
onMounted(() => {
  myChart.value = echarts.init(document.getElementById("pie-chart"));
  resize(myChart.value);
  // resize(myChart.value)
  getServerData();
});

let getServerData = () => {
  myChart.value.setOption({
    backgroundColor: "#02285B",

    tooltip: {
      trigger: "item",

      formatter: (params) => {
        console.log(params, "f");
        if (params.data.name === "当日用水") {
          return `当日用水:&nbsp;` + `${params.value}吨`;
        } else if (params.data.name === "昨日用水") {
          return `昨日用水:&nbsp;` + `${params.value}吨`;
        } else {
          return `环比:&nbsp;` + `${params.value}%`;
        }
      },
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: ["40%", "55%"],
        itemStyle: {
          color: (params) => {
            return colors[params.dataIndex];
          },
        },

        label: {
          show: true,
          formatter: (params) => {
            if (params.data.name === "当日用水") {
              return `当日用水\n` + `${params.value}吨`;
            } else if (params.data.name === "昨日用水") {
              return `昨日用水\n` + `${params.value}吨`;
            } else {
              return `环比\n` + `${params.value}%`;
            }
          },
          color: "#fefefe",
          fontSize: 16,
          lineHeight: 25,
          padding: [0, -60],
          rich: {
            yellow: {
              color: textColors[3],
              fontSize: 24,
            
            },
            green: {
              color: textColors[1],
              fontSize: 24,
            },
            blue: {
              color: textColors[2],
              fontSize: 24,
            },
            purple: {
              color: textColors[0],
              fontSize: 24,
            },
            hrYellow: {
              backgroundColor: textColors[3],
              borderRadius: 3,
              width: 3,
              height: 3,
              padding: [3, 3, 0, -12],
            },
            hrGreen: {
              backgroundColor: textColors[1],
              borderRadius: 3,
              width: 3,
              height: 3,
              padding: [3, 3, 0, -12],
            },
            hrBlue: {
              backgroundColor: textColors[2],
              borderRadius: 3,
              width: 3,
              height: 3,
              padding: [3, 3, 0, -12],
            },
            hrPurple: {
              backgroundColor: textColors[0],
              borderRadius: 3,
              width: 3,
              height: 3,
              padding: [3, 3, 0, -12],
            },
          },
        },
        labelLine: {
          show: true,
          length: 25,
          length2: 80,
          lineStyle: {
            width: 1,
          },
        },
        data: datas,
        z: 0,
      },
    ],
  });
};
</script>
<style lang="scss" scoped>
#pie-chart {
  width: 455px;

  height: 310px;
}
</style>
